<!DOCTYPE html >
<!--PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"-->
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>嘤嘤嘤</title>

    <link rel="stylesheet" type="text/css" href="/css/showArticle.css">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

    <script src="/js/jquery-3.1.1.min.js"></script>

<!--    <link rel="stylesheet" href="/editormd/examples/css/style.css" />-->
<!--    <link rel="stylesheet" href="/editormd/css/editormd.css" />-->
<!--    <link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />-->

</head>
<body>

    <div id="test-editormd-view">
        <p>sdlkfjaslkdfj</p>
<!--        <textarea style="display:none; font-size: 100px" name="text" id="text1" th:text="${articleList}"></textarea>-->
    </div>

    <div class="root">
        <div class="main">
            <div class="card">
                <div class="card-body"></div>
            </div>
        </div>
    </div>

    <input type="hidden" th:value="${articleList}" id="article-list">

<!--<script src="/js/jquery-3.1.1.min.js"></script>-->
<!--<script src="/editormd/editormd.min.js"></script>-->
<!--<script src="/editormd/lib/marked.min.js"></script>-->
<!--<script src="/editormd/lib/prettify.min.js"></script>-->
<!--<script src="/editormd/lib/raphael.min.js"></script>-->
<!--<script src="/editormd/lib/underscore.min.js"></script>-->
<!--<script src="/editormd/lib/flowchart.min.js"></script>-->
<!--<script src="/editormd/lib/sequence-diagram.min.js"></script>-->
<!--<script src="/editormd/lib/jquery.flowchart.min.js"></script>-->
<!--<script src="/editormd/editormd.js"></script>-->
<script type="text/javascript">
    var testEditormdView;
    $(function() {
        testEditormdView = editormd.markdownToHTML("test-editormd-view", {
            htmlDecode      : "style,script,iframe",  // you can filter tags decode
            emoji           : true,
            taskList        : true,
            tex             : true,  // 默认不解析
            flowChart       : true,  // 默认不解析
            sequenceDiagram : true,  // 默认不解析
        });
    });

    $(document).ready(function () {

        // const articleList = $("#article-list").val()
        // console.log(articleList)
        // var html = "";
        // for(i = 0; articleList.length; i++) {
        //     html = "<textarea style=\"display:none; font-size: 100px\" name=\"text\" id=\"text1\"\">"+ articleList[i].text +"</textarea>"
        //     $("#test-editormd-view").append(html)
        // }

        $.ajax({
            url: "/zhifou/article",
            async: false,
            success: function (articleList) {
                console.log(articleList)
                var html = "";
                for(i = 0; i<articleList.length; i++) {
                    console.log(articleList[i])
                    // console.log(articleList[i].text)
                    // html = "<textarea style=\"display:none; font-size: 100px\" name=\"text\" th:text=\" "+ articleList[i].text +"\"></textarea>"
                    html = "<p>"+ articleList[i].text +"</p>"
                    $("#test-editormd-view").append(html)
                }
            }
        })
    })


</script>
</body>
</html>